<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
</style>
</head>
<h2>Tutorial</h2>
This should be the first thing seen when Outbreak Modeler is loaded.
<img border="0" src="Blank.png" width="1000" height="550" />
<div>The buttons across the top of the application control most of the functions within the application.</div>
<div>"Tutorial"- You are already here.</div>
<div>"Add Point"- Drops a marker with a movable radius.</div>
<div>"Search Center"- Drops a special marker that sets the center of the local search.</div>
<div>"Nearby Restaurants"- Activates the local search of nearby restaurants after the search center marker has been placed. Once used, the default "restaurants" search can be changed.</div>
<div>"All Bacteria"- Displays the main sources of certain bacteria strains. Courtesy of GOLDS Genomic Database.</div>
<div>"Demo Points"- Displays data from the 2009 Haiti Cholera Outbreak as an example model. Courtesy of the Center for Disease Control.</div>
<div>"Clear All"- Completely clears the page entirely, including any notes typed. Refreshing the page has the same effect.</div>
<img border="0" src="blank-buttons.PNG" width="1000" height="600" />
<div>The buttons that display markers will display them here</div>
<img border="0" src="Blank-google-map.PNG" width="1000" height="600" />
<div>Here is where the local search results will appear</div>
<img border="0" src="Blank-restaurant-box.PNG" width="1000" height="600" />
<div>To get started modelling an outbreak, click "Add point".
<img border="0" src="addpoint.png" width="1000" height="600" />
<div>The red arrow shows the larger marker that should be placed on the location of patient. The blue arrow points to a smaller circle that should be used to set the radius of the circle. The circle should be placed at how far the patient is willing to travel to eat (if illness is foodborne), how far the patient is willing to travel for water (if illness is waterborne), etc. The circle should encompass any area that the patient would have had access to the pathogen.</div>
<img border="0" src="addpoint-dissection.PNG" width="1000" height="600" />
<div>Below shows a marker dragged to a random location and the radius set to a random distance</div>
<img border="0" src="Setradius.png" width="1000" height="600" />
<div>"Search Center" drops a special marker. This marker becomes the center for a local search when dragged and dropped.</div>
<img border="0" src="Searchcenter-dissection.PNG" width="1000" height="600" />
<img border="0" src="Searchcenter.png" width="1000" height="600" />
<div>Below is an example of the search center marker being dragged and placed on a random location.</div>
<img border="0" src="Dragsearchcenter.png" width="1000" height="600" />
<div>When all of the steps above are combined together, the application should look similar to the image below. By placing the search center on the overlap of patient circles, the local search will give you the nearest restaurants (or whatever was typed into the search box) to the overlap. These restaurants would be more likely (but not necessarily) be the source of the outbreak. Foodborne outbreaks coming from farms or other distributors will have multiple clusters of similar shapes due to distribution patterns. Tip: press "Prnt Scrn" button on your keyboard to take a screenshot of your outbreak model.</div>
<img border="0" src="Example.png" width="1000" height="600" />
</div>Another function of the application is to display the major areas where certain bacterial strains can be found. Bacteria in closer proximity are more likely to share plasmids carrying genes such as antibiotic resistance. Tip: press "Clear All" before loading another set of markers</div>
<img border="0" src="Allbacteria.PNG" width="1000" height="600" />
</div>A cluster of markers is circled in the image below. The number on the cluster shows how many markers that the individual cluster is housing. As you zoom in, the cluster slowly disperses back into individual markers.</div>
<img border="0" src="Allbacteria-circlecluster.PNG" width="1000" height="600" />
<div>The next two images show an example outbreak of Cholera from 2009 in Haiti and how clustering and circles makes the sources more prevailent. The earlier an outbreak is modelled, the faster and easier it is to find the outbreak source. Each circle represents 1 to 25,000 patients. Because the outbreak became so proliferated over a long amount of time, the exact source is hard to distinguish.Data comes from the public data at the CDC. Note: because of how much the application has to render, please give it a few seconds to display "Demo Points"</div>
<img border="0" src="demopoints1.png" width="1000" height="600" />
<img border="0" src="demopoints2.png" width="1000" height="600" />
<div>	<input type="button" value="Back to Outbreak Modeler" onclick="location.href='Main8-0.html'" /></div>
<body bgcolor="#C9C9FF">
</body>
</html>

